<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>角色列表</span>
            </div>
            <el-table
                :data="roles"
                border
                size="mini"
                style="width: 100%">
                <el-table-column
                    label="ID"
                    prop="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="角色名称"
                    prop="title"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="英文标识"
                    prop="name">
                </el-table-column>
                <el-table-column
                    #default="{row:role}"
                    label="操作"
                >
                    <el-button-group>
                        <el-button size="mini" type='primary' @click="edit(role)">编辑</el-button>
                        <el-button size="mini" type='danger' @click="del(role)">删除</el-button>
                        <el-button size="mini" type="success"
                                   @click="$router.push({name:'admin.permission.edit',params:{id:role.id}})">
                            权限设置
                        </el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>

        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {name: 'admin.role.index', meta: {title: '角色列表'}},
    data() {
        return {
            tabs,
            roles: [],
            form: {},
            permissions: [],
            dialogVisible: false,
            users: []
        }
    },
    async created() {
        this.roles = await this.axios.get('admin/role');
        this.permissions = await this.axios.get('admin')
        this.users = await this.axios.get('user');

    },
    methods: {
        edit(role) {
            this.$router.push({name: 'admin.role.edit', params: {id: role.id}})
        },
        async del(role) {
            await this.axios.delete(`admin/role/${role.id}`)
            this.roles = await this.axios.get('admin/role');
        },
        async syncRoles(user, role) {
            this.dialogVisible = true
            this.axios.post(`user/${user.id}/syncRoles`, role)
        },
    }

}
</script>

<style scoped>

</style>
